<template>
	<VueUeditorWrap class="vue-ueditor" v-model="message" :config="editConfig" />
</template>

<script>
import VueUeditorWrap from 'vue-ueditor-wrap';
import emitter from 'element-ui/src/mixins/emitter';
export default {
	name: 'UEditor',
	mixins: [emitter],
	components: { VueUeditorWrap },
	props: {
		value: {
			type: String,
			default: ''
		},
		//编辑器高度
		ueHeight: {
			type: Number,
			default: 300
		},
		//编辑器宽度
		ueWidth: {
			type: String,
			default: '100%'
		},
		zIndex: {
			type: Number,
			default: 2023
		}
	},
	data() {
		return {
			message: this.value,
			editConfig: {
				// 编辑器不自动被内容撑高
				autoHeightEnabled: false,
				// 初始容器高度
				initialFrameHeight: this.ueHeight,
				// 初始容器宽度
				initialFrameWidth: this.ueWidth,
				// 上传文件接口
				serverUrl: '',
				UEDITOR_HOME_URL: '/UEditor/',
				zIndex: this.zIndex,
				toolbars: [
					[
						'undo',
						'fontfamily', // 字体
						'fontsize',
						'bold', // 加粗
						'indent', // 首行缩进
						'justifyleft', // 居左对齐
						'justifyright', // 居右对齐
						'justifycenter', // 居中对齐
						'forecolor',
						'spechars', // 特殊字符
						'pagebreak', // 分页
						'imagecenter', // 居中
						'time',
						'date'
					]
				]
			}
		};
	},
	watch: {
		value(val) {
			this.message = val;
		},
		message(val) {
			this.$emit('input', val);
			this.dispatch('ElFormItem', 'el.form.change', [val]);
		}
	},
	mounted() {}
};
</script>

<style scoped>
.vue-ueditor {
	line-height: 1;
	z-index: 2023;
}
</style>
